<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试</h2>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <!-- a标签点击跳转会刷新页面，性能不好 -->
      <!-- <a class="list-group-item" href="/about">About</a>
      <a class="list-group-item active" href="/home">Home</a> -->
      <!-- 
        router-link是vue-router提供的全局组件
        功能：相当于a标签，点击路由跳转。
        特点：不会刷新页面，只会更新浏览器地址
        属性：
          to 要跳转的路由地址
          active-class 激活状态类名
       -->
      <!-- <router-link
        class="list-group-item"
        active-class="active"
        to="/about?color=pink&xxx=xxx"
      >
        About
      </router-link> -->
      <!-- <router-link
        class="list-group-item"
        active-class="active"
        :to="{ path: '/about?color=pink&xxx=xxx' }"
      >
        About
      </router-link> -->
      <!-- <router-link
        class="list-group-item"
        active-class="active"
        :to="{ path: '/about', query: { color: 'pink', xxx: 'xxx' } }"
      >
        About
      </router-link> -->
      <router-link
        class="list-group-item"
        active-class="active"
        :to="{ name: 'About', query: { color: 'pink', xxx: 'xxx' } }"
      >
        About
      </router-link>
      <router-link class="list-group-item" active-class="active" to="/home">
        Home
      </router-link>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
      <!-- 
        缓存组件 -> 通常用来缓存路由组件  
          max 最大缓存组件数量
          include 只缓存哪些组件
          exclude 不缓存哪些组件
      -->
      <keep-alive :max="10" include="AboutComp,HomeComp">
        <!-- 
          router-view是vue-router提供的全局组件 
          功能：
            会根据当前浏览器地址，遍历路由配置项，看哪个配置项匹配上当前浏览器地址
            然后渲染匹配上的路由组件
          
          router-view只能渲染一个层级的路由组件
          想要渲染子路由，需要在父路由组件中写router-view
        -->
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style></style>
